@layout("/common/_container.html"){
<div class="layui-card">
	<div class="layui-form layui-card-header layuiadmin-card-header-auto">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">围栏名称</label>
				<div class="layui-input-block">
					<input type="text" id="fenceName" name="fenceName" placeholder="围栏名称" autocomplete="off"
						   class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">添加时间</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="startDate" name="startDate" autocomplete="off"
						   placeholder="开始时间">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="endDate" name="endDate" autocomplete="off"
						   placeholder="结束时间">
				</div>
			</div>
			<div class="layui-inline">
				<button class="layui-btn layuiadmin-btn-useradmin" data-type="reload">
					<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
				</button>
			</div>
		</div>
	</div>
  <div class="layui-card-body">
  @if(shiro.hasPermission("/eleFence/add")){
  <div style="padding-bottom: 10px;">
      <button class="layui-btn layuiadmin-btn-useradmin" data-type="add"><i class="layui-icon layui-icon-add-1"></i>添加围栏</button>
  </div>
  @}
  <table class="layui-hidden" id="table" lay-filter="table"></table>
  	<script type="text/html" id="oper">
		  	@if(shiro.hasPermission("/eleFence/update")){
  			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" title="编辑">编辑</a>
			@}    
			@if(shiro.hasPermission("/eleFence/delete")){  
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除">删除</a>
			@}
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail" title="详情">详情</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="account" title="查看账号">查看账号</a>
	</script>
  </div>
</div>

<script>
layui.config({
	base: Feng.ctxPath + "/static/layuiadmin/" //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['index', 'layer','table', 'form','laydate'],function(){
	
	var $ = layui.$
  	,form = layui.form
  	,table = layui.table
	,laydate = layui.laydate;

    //开始日期
    var insStart = laydate.render({
        elem: '#startDate'
        ,type: 'datetime'
        ,done: function(value, date){
            //更新结束日期的最小日期
            insEnd.config.min = lay.extend({}, date, {
                month: date.month - 1
            });
            //自动弹出结束日期的选择器
            insEnd.config.elem[0].focus();
        }
    });
    var insEnd = laydate.render({
        elem: '#endDate'
        ,type: 'datetime'
        ,done: function(value, date){
            //更新开始日期的最大日期
            insStart.config.max = lay.extend({}, date, {
                month: date.month - 1
            });
        }
    });

	var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
	table.render({
	    elem: '#table'
	    ,url: Feng.ctxPath + '/eleFence/list'
	    ,cellMinWidth: 80
	    ,height: 'full-168' //设置高度
	    ,cols: [[
	        {title: '序号', type: 'numbers'},
	        // {title: '编号', field: 'eleFenceId'},
	        {title: '围栏名称', field: 'fenceName'},
	        {title: '添加方式', field: 'createType', templet:function (d) {
                    return d.createType === 1 ? "地图绘制" : (d.createType === 2 ? "点位导入" : (d.createType === 3 ? "行政区化选取" : ""));
                }},
	        {title: '围栏描述', field: 'fenceDesc'},
	        {title: '添加时间', field: 'createTime'},
	        {title: '操作',fixed: 'right', width:240, align:'center',fixed: 'right', toolbar: '#oper'}
	    ]]
	    ,page:true
	    ,loading:true
	    ,text: {
	        none: '暂无相关数据' 
	      }
	    ,done: function(res){
	    	layer.close(loadingIndex);
        }
	});
	
	//事件
	var active = {
		//加载
	   	reload: function(){
	       var fenceName = $('#fenceName').val();
            var startDate = $('#startDate').val();
            var endDate = $('#endDate').val();
	       var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
	       //执行表格重载
	       table.reload('table', {
	    	 height: 'full-168' //设置高度
	    	 ,where: {
                   fenceName: fenceName,
                   startDate: startDate,
                   endDate: endDate
	         }
	       ,page:true
	       ,done: function(res){
		    	layer.close(loadingIndex);
	        }
	      });
	    },
     	add: function(){
     	 var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
         layer.open({
           type: 2
           ,title: '添加围栏'
           ,content: Feng.ctxPath + '/eleFence/eleFence_add'
           ,maxmin: true
           ,area: ['980px', '660px']
           ,btn: ['确定', '取消']
           ,yes: function(index, layero){
             var iframeWindow = window['layui-layer-iframe'+ index]
             ,submitID = 'eleFence-submit'
             ,submit = layero.find('iframe').contents().find('#'+ submitID);
             //监听提交
             iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
               var field = data.field; //获取提交的字段
				 if (field.point === undefined){
                     Feng.error("围栏区域不能为空！");
                     return;
				 }
                 var loading2 = layer.load(2);
               var ajax = new $ax(Feng.ctxPath + "/eleFence/add", function (data) {
                   Feng.success("添加成功!");
                   table.reload('table',{
                	  done: function(res){
           		    	layer.close(loadingIndex);
           	          }
                   }); //数据刷新
                   layer.close(loading2); //关闭弹层
                   layer.close(index); //关闭弹层
               }, function (data) {
                   Feng.error("添加失败!" + data.responseJSON.message + "!");
               },true);
               ajax.setData(field);
               ajax.start();
             });  
             submit.trigger('click');
           }
           ,btn2: function(index, layero){
      	   		layer.close(loadingIndex);
           }
           ,cancel:function(index, layero){
      	   	layer.close(loadingIndex);
           }
         }); 
       }
   };
  
   
   $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
     var type = $(this).data('type');
     active[type] ? active[type].call(this) : '';
   });
	

 //监听工具条
   table.on('tool(table)', function(obj){
     var data = obj.data;
     if(obj.event === 'del'){
    	 layer.confirm('确定删除此电子围栏吗？', function(index){
             var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 ,shade: 0.01});
    		 var ajax = new $ax(Feng.ctxPath + "/eleFence/delete", function (data) {
                 Feng.success("删除成功!");
                 table.reload('table',{
               	  done: function(res){
          		    	layer.close(loadingIndex);
          	          }
                  }); //数据刷新
                 layer.close(index); //关闭弹层
             }, function (data) {
                 Feng.error("删除失败!" + data.responseJSON.message + "!");
             },true);
             ajax.set("eleFenceId", data.eleFenceId);
             ajax.start();
         });
     }else if(obj.event === 'edit'){
       var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
       layer.open({
         type: 2
	     ,maxmin: true
         ,title: '修改电子围栏'
         ,content: Feng.ctxPath + '/eleFence/eleFence_update/'+data.eleFenceId
         ,area: ['980px', '660px']
         ,btn: ['提交', '取消']
         ,yes: function(index, layero){
           var iframeWindow = window['layui-layer-iframe'+ index]
           ,submitID = 'eleFence-submit'
           ,submit = layero.find('iframe').contents().find('#'+ submitID)
           ,pointsSubmit = layero.find('iframe').contents().find('#points-submit');
		   pointsSubmit.trigger('click');

           //监听提交
           iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
             var field = data.field; //获取提交的字段
               var loading2 = layer.load(2);
		     //alert(JSON.stringify(field))
             var ajax = new $ax(Feng.ctxPath + "/eleFence/update", function (data) {
                 Feng.success("修改成功!");
                 table.reload('table',{
               	  done: function(res){
          		    	layer.close(loadingIndex);
          	          }
                  }); //数据刷新
                 layer.close(loading2); //关闭弹层
                 layer.close(index); //关闭弹层
             }, function (data) {
                 Feng.error("修改失败!" + data.responseJSON.message + "!");
             },true);
             ajax.setData(field);
             ajax.start();
             
           });  
           
           submit.trigger('click');
         }
         ,btn2: function(index, layero){
    	   layer.close(loadingIndex);
         }
         ,cancel:function(index, layero){
    	   layer.close(loadingIndex);
         }
       });
     }else if (obj.event === 'detail'){
         var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
         var openIndex = layer.open({
             type: 2
             ,maxmin: true
             ,title: '电子围栏详情'
             ,content: Feng.ctxPath + '/eleFence/eleFence_detail/'+data.eleFenceId
             ,area: ['980px', '660px']
             ,cancel:function(index, layero){
                 layer.close(loadingIndex);
             }
         });
         //layer.full(openIndex);
	 }else if (obj.event === 'account') {
         var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
         var openIndex = layer.open({
             type: 2
             ,maxmin: true
             ,title: '查看账号'
             ,content: Feng.ctxPath + '/eleFence/eleFence_account/'+data.eleFenceId
             ,area: ['850px', '600px']
             ,cancel:function(index, layero){
                 layer.close(loadingIndex);
             }
         });
     }
   });
});



   
</script>
@}
